<div class="page-content">
	<!-- BEGIN PAGE HEADER-->
	<div class="row">
		<div class="col-md-12">
			<!-- BEGIN PAGE TITLE & BREADCRUMB-->
			<h3 class="page-title">
			<?php trans('category_page') ?>
			</h3>
			<ul class="page-breadcrumb breadcrumb">
				<li>
					<i class="fa fa-home"></i>
					<a href="<?php echo admin_url() ?>">
						<?php trans('home_admin') ?>
					</a>
					<i class="fa fa-angle-right"></i>
				</li>
				<li>
					<a href="javascript:void(0)">
						<?php trans('category_page') ?>
					</a>
				</li>

			</ul>
			<!-- END PAGE TITLE & BREADCRUMB-->
		</div>
	</div>
	<!-- END PAGE HEADER-->
	<!-- BEGIN PAGE CONTENT-->
	<div class="row">
		<div class="col-md-12">
			<!-- BEGIN EXAMPLE TABLE PORTLET-->
			<div class="portlet box light-grey">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-globe"></i><?php trans('managed_table') ?>
					</div>
				</div>
				<div class="portlet-body">
					<div class="table-toolbar">
						<div class="btn-group">
							<button onclick="window.location = '<?php echo admin_url() ?>category/add'" id="sample_editable_1_new" class="btn green">
							<?php trans('add_new') ?> <i class="fa fa-plus"></i>
							</button>
						</div>
					</div>
					<table class="table table-striped table-bordered table-hover" id="sample_1">
					<thead>
					<tr>
						<th width="5%" class="align_center">
							<?php trans('no') ?>
						</th>
						<th width="40%">
							 <?php trans('category_name') ?>
						</th>
						<th width="10%" class="align_center">
							 <?php trans('sort_order') ?>
						</th>
						<th width="15%" class="align_center">
							 <?php trans('status') ?>
						</th>
						<th width="15%" class="align_center">
							 <?php trans('image') ?>
						</th>
						<th width="15%" class="align_center">
							 <?php trans('actions') ?>
						</th>
					</tr>
					</thead>
					<tbody>
                    <?php
                        $i = 1;
                        
                        foreach($list_category as $category)
                        {
                            $level = $category['level'];
                            $span = "";
                            for($l = 0; $l < $level; $l++)
                            {
                                $span .= "-- ";
                            }
                            $title_category = $level == 0 ? "<span class='title_parent'>". $span . $category['title'] ."<span>" : $span . $category['title'];
                    ?>
    					<tr class="odd gradeX">
    						<td class="align_center">
    							<?php echo $i++; ?>
    						</td>
    						<td>
    							 <?php echo $title_category ?>
    						</td>
    						<td class="align_center">
    							<?php echo $category['sort_order'] ?>
    						</td>
    						<td class="align_center">
    							 <div class="btn-group-xs change-status">
                                    <?php
                                        if($category['status'] == 1)
                                        {
                                    ?>
									   <button category_id="<?php echo $category['category_id'] ?>" class="btn green" type="button"><?php trans('enable') ?></button>
                                    <?php
                                        }
                                        else
                                        {
                                    ?>
                                        <button category_id="<?php echo $category['category_id'] ?>"  class="btn red" type="button"><?php trans('disable') ?></button>
                                    <?php
                                        }
                                    ?>
								</div>
    						</td>
    						<td class="align_center">
    							 <img class="img_small" src="public/upload/images/no-image.jpg" alt="IMG" />
    						</td>
    						<td class="align_center">
    							<div class=" btn-group-xs">
                                    <a class="btn blue" href="<?php echo admin_url() ?>category/edit/<?php echo $category['category_id'] ?>"><?php trans('edit') ?></a>
                                    <a href="javascript:void(0)" class="btn red config delete_category" category_id="<?php echo $category['category_id'] ?>"><?php trans('delete') ?></a>
								</div>
    						</td>
    					</tr>
                    <?php
                        }
                    ?>

					</tbody>
					</table>
				</div>
			</div>
			<!-- END EXAMPLE TABLE PORTLET-->
		</div>
	</div>
	<!-- END PAGE CONTENT-->
</div>
<script>
var TableManaged = function () {
    return {
        //main function to initiate the module
        init: function () {
            
            if (!jQuery().dataTable) {
                return;
            }

            // begin first table
            $('#sample_1').dataTable({
                "aoColumns": [
                  { "bSortable": true },
                  { "bSortable": true },
                  { "bSortable": true },
                  { "bSortable": true },
                  { "bSortable": false },
                  { "bSortable": false }
                ],
                "aLengthMenu": [
                    [5, 15, 20, -1],
                    [5, 15, 20, "All"] // change per page values here
                ],
                // set the initial value
                "iDisplayLength": 10,
                "sPaginationType": "bootstrap",
                "oLanguage": {
                    "sLengthMenu": "_MENU_ records",
                    "oPaginate": {
                        "sPrevious": "Prev",
                        "sNext": "Next"
                    }
                },
                "aoColumnDefs": [
                    { 'bSortable': false, 'aTargets': [0] },
                    { "bSearchable": false, "aTargets": [ 0 ] }
                ]
            });

            jQuery('#sample_1').on('change', 'tbody tr .checkboxes', function(){
                 $(this).parents('tr').toggleClass("active");
            });

            jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control input-medium input-inline"); // modify table search input
            jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control input-xsmall"); // modify table per page dropdown
            //jQuery('#sample_1_wrapper .dataTables_length select').select2(); // initialize select2 dropdown

        }

    };

}();
</script>